<template>
    <div>
        <div id="bbb" style="padding: 20px">
            <template>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%;padding: 20px">
                    <el-table-column prop="time" align="center"></el-table-column>
                    <el-table-column prop="data[0]" label="星期一" align="center">
                        <template slot-scope="scope">
                            <p>{{scope.row.data[0].className}}</p>
                            <p>{{scope.row.data[0].courseName}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="data[1]" label="星期二" align="center">
                        <template slot-scope="scope">
                            <p>{{scope.row.data[1].className}}</p>
                            <p>{{scope.row.data[1].courseName}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="data[2]" label="星期三" align="center">
                        <template slot-scope="scope">
                            <p>{{scope.row.data[2].className}}</p>
                            <p>{{scope.row.data[2].courseName}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="data[3]" label="星期四" align="center">
                        <template slot-scope="scope">
                            <p>{{scope.row.data[3].className}}</p>
                            <p>{{scope.row.data[3].courseName}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="data[4]" label="星期五" align="center">
                        <template slot-scope="scope">
                            <p>{{scope.row.data[4].className}}</p>
                            <p>{{scope.row.data[4].courseName}}</p>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-button type="primary" style="float: left;margin-left: 35px" @click="previousWeek()">上一周</el-button>
                    <el-button type="primary" style="margin-left: 40%" @click="now()">返回当周</el-button>
                    <el-button type="primary" style="float: right;margin-right: 35px" @click="nextWeek()">下一周</el-button>
                </el-row>
            </template>
        </div>
    </div>
</template>

<script>
    import axios from "axios";
    import FileSaver from "file-saver"
    import XLSX from "xlsx"

    export default {
        name: "List",
        data() {
            return {
                tableData: [
                    {
                        time: "1-2节",
                        data: []
                    }, {
                        time: "2-3节",
                        data: []
                    }, {
                        time: "4-5节",
                        data: []
                    }, {
                        time: "5-6节",
                        data: []
                    }
                ],
                num: 0
            };
        },
        methods: {
            pageHandler(num) {
                this.week = 0;
                //使用 axios 调用后台接口
                let url =
                    "/api/timetable?id=" + this.$route.query.id + "&date=" + num
                axios
                    .get(url)
                    .then(res => {
                        this.tableData[0].data = []
                        this.tableData[1].data = []
                        this.tableData[2].data = []
                        this.tableData[3].data = []
                        for (let i = 0; i < 20; i += 4) {
                            this.tableData[0].data.push(res.data[i])
                            this.tableData[1].data.push(res.data[i + 1])
                            this.tableData[2].data.push(res.data[i + 2])
                            this.tableData[3].data.push(res.data[i + 3])
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            previousWeek() {
                this.num = this.num - 1
                this.pageHandler(this.num)
            },
            nextWeek() {
                this.num = this.num + 1
                this.pageHandler(this.num)
            },
            now() {
                this.num = 0;
                this.pageHandler(0);
            }
        },
        created() {
            //created  表示页面加载完毕，立即执行
            this.pageHandler(0);

        }
    };
</script>

<style lang="scss" scoped>
    .el-table .warning-row {
        background: #f7faff;
    }

    .el-table .success-row {
        background: #ebf1fb;
    }

    #bbb {
        width: 100%;
        height: 2000px;
        background-color: rgb(255, 255, 255);
        overflow: scroll;
        position: absolute;
        top: 10px;
        left: 0px;
        z-index: 101;
    }
</style>
